 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>当当网购物车页面</title>
		<link href="css/global.css" rel="stylesheet" type="text/css" />
		<link href="css/layout.css" rel="stylesheet" type="text/css" />
		<script>
			function $(id){
				return document.getElementById(id);
			}
			//id1--img改变他的src
			//id2--div修改display
			function changeStyle(id1,id2){
				let obj1=$(id1);
				let obj2=$(id2);
				if(obj2.style.display=='block'){
					obj2.style.display='none';
					//obj1.src='';
					obj1.setAttribute('src','images/dd_arrow_down.gif');
				}else{
					obj2.style.display='block';
					obj1.setAttribute('src','images/product_page_up.gif');
				}
			}
			//给id="mytable"中的每一行添加onmouseover onmouseout的样式鼠标放上去一个颜色 放下来一个颜色
			function show(){
				// $("mytable").rows;
				let trs=$("mytable").getElementsByTagName("tr");
				for(let i=0;i<trs.length;i++){ //用var i=0时 需将trs[i]改成this
					// trs[i].onmouseover=function(){
					// 	trs[i].style.background='yellow';
					// }
					//或
					trs[i].addEventListener("mouseover",function(){
						trs[i].style.background='yellow';
					});
					trs.item(i).onmouseout=function(){
						this.style.background='#fefdf2';
						
					}
				}
			}
			function init(){
				show();
				productCount();
				
				//获取
				let links=document.getElementsByClassName("shopping_yellow");
				for(let i=0;i<links.length;i++){
					links.item(i).onclick=function(){
						var bookName=this.parentNode.parentNode.getElementsByTagName("li")[0].innerText;
						
						var price=this.parentNode.parentNode.getElementsByTagName("li")[1].innerText.substring(1);
						
						var ddprice=this.parentNode.parentNode.getElementsByTagName("li")[2].innerText.substring(1);
						
						if(checkBookName(bookName)){
							return;
						}
						let tr=document.createElement("tr");
						var d=new Date();
						var id=d.getHours()+d.getMinutes()+""+d.getSeconds();
						tr.setAttribute("class","shopping_product_list")
						var trid="shoppingProduct_"+id;
						tr.setAttribute("id",trid);
						
						//加td  商品名
						var td1=document.createElement("td");
						td1.setAttribute("class","shopping_product_list_1");
						td1.innerHTML="<a href='#' class='blue'>"+bookName+"</a>";
						
						tr.appendChild(td1);
						console.log(tr);
						$("mytable").getElementsByTagName("tbody")[0].appendChild(tr);
				
						//加td 单品积分
						var td2=document.createElement("td");
						td2.setAttribute("class","shopping_product_list_2");
						td2.innerHTML=(ddprice*10).toFixed(0);
						tr.appendChild(td2);
						
						//加td 市场价格
						var td3=document.createElement("td");
						td3.setAttribute("class","shopping_product_list_3");
						td3.innerHTML="&yen"+parseFloat(price).toFixed(2);
						tr.appendChild(td3);
						
						//加td 当当价格
						var td4=document.createElement("td");
						td4.setAttribute("class","shopping_product_list_4");
						td4.innerHTML="&yen"+ddprice+"("+Math.round((ddprice/price)*100)+"折)";
						tr.appendChild(td4);
						
						//加td数量
						var td5=document.createElement("td");
						td5.setAttribute("class","shopping_product_list_5");
						td5.innerHTML="<input type='text' value='1' onchange='change(this)'>";
						tr.appendChild(td5);
						
						//加删除按钮
						var td6=document.createElement("td");
						td6.setAttribute("class","shopping_product_list_6");
						td6.innerHTML="<a href='javascript:deleteObject(\""+'shoppingProduct_'+id+"\")' class='blue'>删除</a>"
						tr.appendChild(td6);
						console.log(td6);
						show();
						
					};
				}
			}
			//购物车结算函数：总价  积分  节省的金额
			function productCount(){
				let total=0; //总金额
				let save=0; //节省金额
				let integral=0; //积分
				
				let trs=$("mytable").rows;
				for(let i=0;i<trs.length;i++){
					let tr=trs[i];
					var point=parseInt(tr.cells[1].innerText);
					var price=parseFloat(tr.cells[2].innerText.substring(1));
					var t=tr.cells[3].innerText;
					var index=t.indexOf("(");
					var ddprice=parseFloat(t.substring(1,index));
					var num=tr.cells[4].getElementsByTagName("input")[0].value;
					if(num<=0){
						$("mytable").getElementsByTagName("tbody")[0].removeChild(trs[i]);
						productCount();
						return;
					}
					integral+=point*num;
					total+=ddprice*num;
					save+=(price-ddprice)*num;
				}
				$("save").innerHTML="&yen;"+save.toFixed(2);
				$("total").innerHTML="&yen;"+total.toFixed(2);
				$("integral").innerText=integral;
			}
			//删除按钮  点击删除 删除购物车的该商品
			function deleteObject(aLink){
				let toDeleteTr=$(aLink);//获取删除的商品
				toDeleteTr.remove();//用remove方法删除该商品
				productCount();//更新购物车的结算： 总价  积分  节省的金额
			}
			//如果bookName已经存在  则数量加一
			function checkBookName(bookName){
				var trs=$("mytable").getElementsByTagName("tr");
				for(var i=0;i<trs.length;i++){
					var bn=trs[i].getElementsByTagName("td")[0].getElementsByTagName("a")[0].innerText;//获取购物车的商品名字
					if(bn==bookName){
						//修改数量  
						var val=trs[i].getElementsByTagName("td")[4].getElementsByTagName("input")[0].value;
						val=parseInt(val);
						trs[i].getElementsByTagName("td")[4].getElementsByTagName("input")[0].value=++val;
						productCount();
						return true;
					}
				}
				return false;
			}
			//改变商品数量
			function change(obj){
				let num=obj.value;//获取该value的数量
				if(num<0){
					alert("数量必须大于等于0");
					return;
				}
				productCount();//更新购物车的结算： 总价  积分  节省的金额
			}
			window.addEventListener("DOMContentLoaded",init);
		</script>
	</head>

	<body>
		<div id="header"><iframe src="header.html" height="155px" width="960px" frameborder="0"></iframe></div>
		<!--中间部分开始-->
		<div id="main">
			<div>&nbsp;&nbsp;<img src="images/shopping_myshopping.gif" alt="shopping"> <a href="#">全场免运费活动中</a></div>
			<!--为您推荐商品开始-->
			<div class="shopping_commend">
				<div class="shopping_commend_left">根据您挑选的商品，当当为您推荐</div>
				
				
				<div class="shopping_commend_right" onclick="changeStyle('shopping_commend_arrow','shopping_commend_sort')">
					<img src="images/shopping_arrow_up.gif" alt="shopping" 
					id="shopping_commend_arrow">
				</div>
			</div>
			<div id="shopping_commend_sort">
				<div class="shopping_commend_sort_left">
					<ul>
						<li class="shopping_commend_list_1">·<a href="#" class="blue">JavaScript DOM编程艺术</a></li>
						<li class="shopping_commend_list_2">￥39.00</li>
						<li class="shopping_commend_list_3">￥29.30</li>
						<li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li>
					</ul>
					<ul>
						<li class="shopping_commend_list_1">·<a href="#" class="blue">解禁（当当网独家首发）</a></li>
						<li class="shopping_commend_list_2">￥28.00</li>
						<li class="shopping_commend_list_3">￥19.40</li>
						<li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li>
					</ul>
					<ul>
						<li class="shopping_commend_list_1">·<a href="#" class="blue">地王之王（金融危机下房地产行...</a></li>
						<li class="shopping_commend_list_2">￥32.80</li>
						<li class="shopping_commend_list_3">￥25.10</li>
						<li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li>
					</ul>
					<ul>
						<li class="shopping_commend_list_1">·<a href="#" class="blue">逃庄</a></li>
						<li class="shopping_commend_list_2">￥36.00</li>
						<li class="shopping_commend_list_3">￥27.70</li>
						<li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li>
					</ul>
				</div>
				<div class="shopping_commend_sort_mid"></div>
				<div class="shopping_commend_sort_left">
					<ul>
						<li class="shopping_commend_list_1">·<a href="#" class="blue">深入浅出MySQL数据库开发、优...</a></li>
						<li class="shopping_commend_list_2">￥59.00</li>
						<li class="shopping_commend_list_3">￥47.20</li>
						<li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li>
					</ul>
					<ul>
						<li class="shopping_commend_list_1">·<a href="#" class="blue">大玩家（马未都、王刚推荐!央...</a></li>
						<li class="shopping_commend_list_2">￥34.80</li>
						<li class="shopping_commend_list_3">￥20.60</li>
						<li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li>
					</ul>
					<ul>
						<li class="shopping_commend_list_1">·<a href="#" class="blue">都市风水师--官场风水小说：一...</a></li>
						<li class="shopping_commend_list_2">￥39.80</li>
						<li class="shopping_commend_list_3">￥30.50</li>
						<li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li>
					</ul>
					<ul>
						<li class="shopping_commend_list_1">·<a href="#" class="blue">国戏（以麻将术语解读宦海沉浮...</a></li>
						<li class="shopping_commend_list_2">￥25.00</li>
						<li class="shopping_commend_list_3">￥17.30</li>
						<li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li>
					</ul>
				</div>
			</div>

			<div class="shopping_list_top">您已选购以下商品</div>
			<div class="shopping_list_border">
				<table width="100%" border="0" cellspacing="0" cellpadding="0" >
					<tr class="shopping_list_title">
						<td class="shopping_list_title_1">商品名</td>
						<td class="shopping_list_title_2">单品积分</td>
						<td class="shopping_list_title_3">市场价</td>
						<td class="shopping_list_title_4">当当价</td>
						<td class="shopping_list_title_5">数量</td>
						<td class="shopping_list_title_6">删除</td>
					</tr>
				</table>
				<table width="100%" border="0" cellspacing="0" cellpadding="0" id="mytable">
					<tr class="shopping_product_list" id="shoppingProduct_01">
						<td class="shopping_product_list_1"><a href="#" class="blue">私募（首部披露资本博弈秘密的金融...</a></td>
						<td class="shopping_product_list_2">189</td>
						<td class="shopping_product_list_3">￥32.00</td>
						<td class="shopping_product_list_4">￥18.90 (59折)</td>
						<td class="shopping_product_list_5"><input type="text" value="1" onchange="change(this)"></td>
						<td class="shopping_product_list_6"><a href="javascript:deleteObject('shoppingProduct_01')" class="blue" >删除</a></td>
					</tr>
					<tr class="shopping_product_list" id="shoppingProduct_02">
						<td class="shopping_product_list_1"><a href="#" class="blue"> 小团圆（张爱玲最神秘小说遗稿）</a></td>
						<td class="shopping_product_list_2">173</td>
						<td class="shopping_product_list_3">￥28.00</td>
						<td class="shopping_product_list_4">￥17.30 (62折)</td>
						<td class="shopping_product_list_5"><input type="text" value="1" onchange="change(this)"></td>
						<td class="shopping_product_list_6"><a href="javascript:deleteObject('shoppingProduct_02')" class="blue">删除</a></td>
					</tr>

					<tr class="shopping_product_list" id="shoppingProduct_03">
						<td class="shopping_product_list_1"><a href="#" class="blue">不抱怨的世界(畅销全球80国的世界...</a></td>
						<td class="shopping_product_list_2">154</td>
						<td class="shopping_product_list_3">￥24.80</td>
						<td class="shopping_product_list_4">￥15.40 (62折)</td>
						<td class="shopping_product_list_5"><input type="text" value="1" onchange="change(this)"></td>
						<td class="shopping_product_list_6"><a href="javascript:deleteObject('shoppingProduct_03')" class="blue">删除</a></td>
					</tr>
					<tr class="shopping_product_list" id="shoppingProduct_04">
						<td class="shopping_product_list_1"><a href="#" class="blue">福玛特双桶洗衣机XPB20-07S</a></td>
						<td class="shopping_product_list_2">358</td>
						<td class="shopping_product_list_3">￥458.00</td>
						<td class="shopping_product_list_4">￥358.00 (78折)</td>
						<td class="shopping_product_list_5"><input type="text" value="1" onchange="change(this)"></td>
						<td class="shopping_product_list_6"><a href="javascript:deleteObject('shoppingProduct_04')" class="blue">删除</a></td>
					</tr>
					<tr class="shopping_product_list" id="shoppingProduct_05">
						<td class="shopping_product_list_1"><a href="#" class="blue">PHP和MySQL Web开发 （原书第4版）</a></td>
						<td class="shopping_product_list_2">712</td>
						<td class="shopping_product_list_3">￥95.00</td>
						<td class="shopping_product_list_4">￥71.20 (75折)</td>
						<td class="shopping_product_list_5"><input type="text" value="1" onchange="change(this)"></td>
						<td class="shopping_product_list_6"><a href="javascript:deleteObject('shoppingProduct_05')" class="blue">删除</a></td>
					</tr>
					<tr class="shopping_product_list" id="shoppingProduct_06">
						<td class="shopping_product_list_1"><a href="#"
								class="blue">法布尔昆虫记</a>（再买￥68.30即可参加“满199元减10元现金”活动）</td>
						<td class="shopping_product_list_2">10</td>
						<td class="shopping_product_list_3">￥198.00</td>
						<td class="shopping_product_list_4">￥130.70 (66折)</td>
						<td class="shopping_product_list_5"><input type="text" value="1" onchange="change(this)"></td>
						<td class="shopping_product_list_6"><a href="javascript:deleteObject('shoppingProduct_06')" class="blue">删除</a></td>
					</tr>
				</table>
				<div class="shopping_list_end">
					<ul>
						<li class="shopping_list_end_1"><input name="" type="image" src="images/shopping_balance.gif">
						</li>
						<li class="shopping_list_end_2" id="total">￥626.90</li>
						<li class="shopping_list_end_3">商品金额总计：</li>
						<li class="shopping_list_end_4">您共节省：<label
								class="shopping_list_end_yellow" id="save">￥233.70</label><br />
							可获商品积分：<label class="shopping_list_end_yellow" id="integral">1740</label>
						</li>
					</ul>
				</div>
			</div>



		</div>

		<!--网站版权部分开始-->
		<div id="footer">
			<iframe src="footer.html" height="50px" width="900px" frameborder="0"></iframe>
		</div>
	</body>
</html>